<!-- 拼图详情 -->
<template>
	<div class="group-detail">
		<TopBar :titles="pageTitle"></TopBar>

		<!-- 拼图商品图片 -->
		<div class="group-item">
			<van-card :tag="groupItem.condition" :price="groupItem.groupNum + '人团' "  :title="commodity.des"
			 :thumb="thumb" currency="">
				<template #num>
					￥{{commodity.price}}
				</template>
			</van-card>
		</div>

		<!-- 拼团倒计时 -->
		<div class="cutdown">
			<van-count-down :time="groupItem.cutdown">
				<template #default="timeData">
					<span class="tips">本团剩余</span>
					<span class="block">{{ timeData.hours }}</span>
					<span class="colon">小时</span>
					<span class="block">{{ timeData.minutes }}</span>
					<span class="colon">分</span>
					<span class="block">{{ timeData.seconds }}</span>
					<span class="colon">秒</span>
				</template>
			</van-count-down>
			<div>
				还差{{groupItem.groupNum - groupItem.joinUser.length}}人成团，赶快邀请好友加入吧！
			</div>
			<!-- 已参团成员 -->
			<div class="join-group">
				<van-row class="join-wrapper">
					<div class="img-wrapper"
					v-for="user of groupItem.joinUser"
					:key = "user.id">
						<van-image
						  round
						  width="3rem"
						  height="3rem"
						  :src="user.thumb"
						>
							<template v-slot:loading>
								<van-loading type="spinner" size="20" />
							</template>
						</van-image>
						<van-tag type="primary" class="tag" v-if="user.isLeader">团长</van-tag>
					</div>
					
					<!-- 邀请开团 -->
					<van-icon name="add" color="red" size="35" @click="inviteUser"/>
				</van-row>
			</div>
		</div>
		
		<!-- 拼团玩法 -->
		<div class="group-way">
			<van-grid :column-num="3" :border="false" icon-size="40">
			  <van-grid-item
			  v-for="gw of groupWay"
			  :key="gw.id"
			  :icon="gw.icon"
			  :text="gw.title" />
			</van-grid>
			<div class="group-way-tag">
				拼团玩法
			</div>
		</div>
		
		<van-divider
		  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0px' }"
		>
		  你可能还喜欢
		</van-divider>
		
		<!-- 推荐商品 -->
		<div class="recommend-list-wrapper">
			<div class="recommend-list">
				<div class="recommend-item"
				v-for="item of recommendList"
				:key="item.id">
					<van-image
					width="100%"
					height="100%"
					fit="cover"
					:src="getThumb(item.id)"></van-image>
					<div class="van-multi-ellipsis--l2 desc">
					  {{item.des}}
					</div>
					<div class="other-info">
						<span class="price">
							￥{{item.price}}
						</span>
						<span class="buy-num">
							{{item.hasSaleNum}}件已卖
						</span>
					</div>
				</div>
				
			</div>
		</div>
		
		
		<van-divider
		  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0px' }"
		>
		  亲，我也是有底线的
		</van-divider>
		
		<!-- 底部按钮 -->
		<van-row>
			<van-col span="8">
				<van-button icon="home-o" type="primary" to="/home" plain block>
					更多拼团
				</van-button>
			</van-col>
			<van-col span="15" offset="1">
				<van-button type="primary"
				block
				@click="tipStartGroup">还差{{groupItem.groupNum - groupItem.joinUser.length}}人拼团成功</van-button>
			</van-col>
		</van-row>
		<BottomBar></BottomBar>
	</div>
</template>

<script>
	// 所有可用组件
	import allComponent from '../util/allComponent.js'
	// 当前页面数据
	import groupDetailDao from '../dao/groupDetailDao.js'
	
	import Vue from 'vue';
	import { Dialog } from 'vant';

	export default {
		name: 'GroupDetail',
		components: {
			TopBar: allComponent.TopBar,
			BottomBar: allComponent.BottomBar,
			[Dialog.Component.name]: Dialog.Component,
		},
		data() {
			return {
				pageTitle: '拼团详情',
				
				groupItem: groupDetailDao.getGroupItem(), // 拼团相关数据
				
				groupWay: groupDetailDao.getGroupWay(), //拼团方式
				
				recommendList: groupDetailDao.getRecommend(), //推荐商品
				
				commodity:''
			}
		},
		methods:{
			inviteUser(){
				alert('邀请用户...')
			},
			tipStartGroup(){
				let startNum = this.groupItem.groupNum - this.groupItem.joinUser.length
				Dialog.alert({
				  title: '开团成功',
				  message: '还差'+startNum+'人成团，赶快邀请好友加入吧！',
				}).then(() => {
				  
				});
			},
			getThumb(id){
				let cur = this.recommendList.filter((item)=>{
					return item.id === id
				})
				console.log(cur);
				return cur[0].pics[0];
			}
		},
		mounted() {
			let sid = this.$route.params.id;
			
			this.$store.commit({
				type:'selectById',
				formName:'commodities',
				id:sid
			})
			
			this.commodity = this.$store.state.res[0];
		},
		computed:{
			thumb:function(){
				return this.commodity.pics[0];
			}
		}
	}
</script>

<style scoped="scoped">
	.group-detail {
		padding: 10px 0.625rem 86px 10px;
		position: relative;
		color: #333;
	}

	.group-item {
		border-radius: 0.3125rem;
		border: 1px solid #ddd;
	}
	.tips {
		margin-right: 0.625rem;
	}
	
	.colon {
		display: inline-block;
		margin: 0 4px;
		color: #ee0a24;
	}

	.block {
		display: inline-block;
		height: 1.875rem;
		width: 1.875rem;
		line-height: 1.875rem;
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		background-color: #ee0a24;
	}
	.cutdown {
		padding: 0.9375rem;
		text-align: center;
		line-height: 2.5rem;
		margin-top: 0.625rem;
		border-radius: 0.3125rem;
		border: 1px solid #ddd;
	}
	.van-image {
		vertical-align: middle;
	}
	.van-icon {
		vertical-align: middle;
	}
	.img-wrapper {
		display: inline-block;
		position: relative;
		margin-right: 0.625rem;
	}
	.tag {
		position: absolute;
		right: -0.625rem;
		top: 0;
	}
	.group-way {
		padding: 0.625rem;
		margin-top:1.25rem;
		border: 1px solid #ddd;
		position: relative;
		border-radius: 0.3125rem;
	}
	.group-way-tag {
		padding: 0.1875rem 0.3125rem;
		border: 1px solid #ddd;
		border-radius: 0.125rem;
		position: absolute;
		font-size: 0.75rem;
		top: 0;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: red;
		color: #fff;
	}
	.recommend-list-wrapper {
		overflow: hidden;
	}
	.recommend-list {
		margin-right: -20px;
	}
	.recommend-item {
		box-sizing: border-box;
		float: left;
		margin-bottom: 0.625rem;
		width:calc((100% - 40px) * 0.5);
		padding: 0.3125rem;
		margin-right: 20px;
		border: 1px solid #ddd;
		border-radius: 0.1875rem;
	}
	.desc {
		text-indent: 1em;
		font-size: 0.8125rem;
	}
	.other-info::after {
		content: '';
		display: table;
		clear: both;
	}
	.other-info {
		height: 1.25rem;
		line-height: 1.25rem;
		padding-top: 0.3125rem;
	}
	.price {
		float: left;
		color: red;
	}
	.buy-num{
		color: #aaa;
		float: right;
		font-size: 0.75rem;
	}
</style>
